<template>
  <div style="min-height: 300px">
    <el-form ref="orderForm" :model="entity" :rules="rules" label-width="auto">
      <el-form-item label="Customer" prop="kehuid">
        <el-select v-model="entity.kehuid" placeholder="select Customer"  style="width: 100%;" >
          <el-option v-for="item in state.keHuList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="Vale PO No" prop="ordernumber">
        <el-input v-model="entity.ordernumber" ref="ordernumber" />
      </el-form-item>
      <el-form-item label="Vale PO Date" prop="orderdate">
        <el-date-picker v-model="entity.orderdate" type="date" style="width: 100%;" value-format="yyyy-MM-dd" />
      </el-form-item>
      <el-form-item label="Vale SAP Code" prop="valesapcode">
        <el-input v-model="entity.valesapcode"   />
      </el-form-item>
      <el-form-item label="PO Value(US$)" prop="povalue">
        <el-input v-model="entity.povalue"  />
      </el-form-item>
      <el-form-item label="Quantity(Meter)" prop="quantity">
        <el-input v-model="entity.quantity"  />
      </el-form-item>
      <el-form-item label="Tech. Clarification" prop="techclarification">
        <el-input v-model="entity.techclarification"  />
      </el-form-item>
      <el-form-item label="Invoice No" prop="tnvoiceno">
        <el-input v-model="entity.tnvoiceno"  />
      </el-form-item>
      <el-form-item label="Ref. No" prop="refno">
        <el-input v-model="entity.refno"  />
      </el-form-item>
      <el-form-item label="Completed Status(%)" prop="completedstatus">
        <el-input v-model="entity.completedstatus"  />
      </el-form-item>
      <el-form-item label="Raw Material Preparation" prop="rmp">
        <el-input v-model="entity.rmp"  />
      </el-form-item>
      <el-form-item label="Production" prop="production">
        <el-input v-model="entity.production"  />
      </el-form-item>
      <el-form-item label="Inspection & Packing" prop="inspectionpacking">
        <el-input v-model="entity.inspectionpacking"  />
      </el-form-item>
      <el-form-item label="Planned Completion Date" prop="pcd">
        <el-date-picker v-model="entity.pcd" type="date" style="width: 100%;" value-format="yyyy-MM-dd" />
      </el-form-item>
      <el-form-item label="Actual Completion Date" prop="acd">
        <el-date-picker v-model="entity.acd" type="date" style="width: 100%;" value-format="yyyy-MM-dd" />
      </el-form-item>
      <el-form-item label="Contract Delivery Date" prop="cdd">
        <el-date-picker v-model="entity.cdd" type="date" style="width: 100%;" value-format="yyyy-MM-dd" />
      </el-form-item>
      <el-form-item label="ETD" prop="etd">
        <el-date-picker v-model="entity.etd" type="date" style="width: 100%;" value-format="yyyy-MM-dd" />
      </el-form-item>
      <el-form-item label="ETA" prop="eta">
        <el-date-picker v-model="entity.eta" type="date" style="width: 100%;" value-format="yyyy-MM-dd" />
      </el-form-item>
      <el-form-item label="Incoterms" prop="incoterms">
        <el-input v-model="entity.incoterms"  />
      </el-form-item>
      <el-form-item label="Client Country" prop="clientcountry">
        <el-input v-model="entity.clientcountry"  />
      </el-form-item>
      <el-form-item label="Action Plan to Rectify" prop="aptr">
        <el-input v-model="entity.aptr"  />
      </el-form-item>
      <div style="margin: 0 auto; width: 200px">
        <el-form-item>
          <el-button type="primary" @click="btnSubmit" size="default">确 定</el-button>
          <el-button @click="onCancel" size="default">取 消</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script setup name="orderDetail">
import request from '/@/utils/request';
import dayjs from "dayjs";
import { ElMessage } from 'element-plus';
import mittBus from '/@/utils/mitt';
import {reactive, ref, onMounted, defineProps, defineEmits, nextTick} from "vue";

const orderForm = ref(null)
const ordernumber = ref(null)
const emit = defineEmits(['update:modelValue'])
let props = defineProps({
  modelValue : {type : Boolean, default: true},
  entityId : {type : Number, default: 0}
})

let entity = ref({
  kehuid:undefined,
  id : props.entityId,
  ordernumber: '',
  orderdate: '',
  valesapcode: '',
  povalue: '',
  quantity: '',
  techclarification: '',
  tnvoiceno: '',
  refno: '',
  completedstatus: '',
  rmp: '',
  production: '',
  inspectionpacking: '',
  pcd: '',
  acd: '',
  cdd: '',
  etd: '',
  eta: '',
  incoterms: '',
  clientcountry: '',
  aptr: '',
})
const rules = reactive({
  kehuid: [
    { required: true, message: '请选择客户', trigger: 'blur' },
  ],
  ordernumber: [
    { required: true, message: '请输入订单号', trigger: 'blur' },
  ],
  orderdate: [
    { required: true, message: '请输入订单日期', trigger: 'blur' }
  ]
})
const state = reactive({
  keHuList : [],
})

const loadKeHu = () => {
  request({
    url: '/sys/kehuadmin/listkehu',
    data: {}
  }).then( res =>{
    state.keHuList = res.data
  })
}
const loadEntity = ()=>{
  if(props.entityId > 0){
    request({ url: '/order/getordermx', data: {id : props.entityId} }).then( res =>{
      entity.value = res.data
      entity.value.orderdate= dayjs(entity.value.orderdate).format('YYYY-MM-DD')
      entity.value.pcd= dayjs(entity.value.pcd).format('YYYY-MM-DD')
      entity.value.acd= dayjs(entity.value.acd).format('YYYY-MM-DD')
      entity.value.cdd= dayjs(entity.value.cdd).format('YYYY-MM-DD')
      entity.value.etd= dayjs(entity.value.etd).format('YYYY-MM-DD')
      entity.value.eta= dayjs(entity.value.eta).format('YYYY-MM-DD')
    })
  }
}
const btnSubmit = ()=>{
  if(!orderForm.value) return;
  orderForm.value.validate((valid)=>{
    if(valid){
      request({
        url: '/order/addeditordermx',
        data: entity.value
      }).then( res =>{
        if(res.code === "200"){
          ElMessage.success(res.msg)
          emit('update:modelValue', false) //关闭弹窗
          props.entityId > 0 ? mittBus.emit('orderedit', {}) : mittBus.emit('orderadd', {});   //触发事件总线，让列表界面更新数据
        }else{
          ElMessage.error(res.msg);
        }
      })
    }else{
      console.log('error submit!!');
      return false;
    }
  })
}
const onCancel = ()=>{
  emit('update:modelValue', false) //关闭弹窗
}

onMounted(()=>{
  loadKeHu();
  loadEntity()
  nextTick(()=>{
    ordernumber.value.focus();
  })
})
</script>
<style scoped>
</style>
